Sketch.app で角丸の半径を個別に指定する方法

Sketch 3

最近、スマホアプリのデザインをするときにはほぼSketchで作業しています。一部、複雑なパスを描く場合や画像の加工が必要な時にはIllustratorやPhotoshopを使うような感じでやってます。
Sketchは動作が軽く、アイコンなどの素材の書き出しが柔軟で簡単なので非常にオススメのツールです。
そこで、今回はSketchのお役立ちTipsとして角丸の半径を個別に指定する方法をご紹介します。

てっきり...

Sketchでは、角丸の半径を個別に指定することはできないものだと思い込んでいました。Illustratorだと四角形を描画するとこんな風に角丸の半径を個別に指定できますね。

これをSketchでも同じようにやりたいのですが、

Radiusって書いてあるだけでこのつまみを動かすだけだと当然４つの角が変化します。私はこれを一目見て諦めていたわけですが、Sketchでも角丸の半径を個別に指定する方法があったんです。

やってみよう

ポイントはRadiusを数値指定することです。まず、このRadiusはつまみを動かすだけだと、最大40までしか指定できませんが、数値を直接指定するともっと大きな角丸を作ることができます。つまり、ビジュアルは見せかけです。やれることはもっといっぱいあるということです。

特定のフォーマットで値を指定

角丸の半径を個別に指定するには特定のフォーマットに従って値を指定する必要があります。それがこちら。

このように、半径の値をスラッシュ/で区切ってRadiusに入力するとそれぞれ角に対応した角丸の半径を指定できます。

まだまだ

Sketchはよく使っているものの、まだまだ使いこなせていないです。探せばこんな感じのTipsはいっぱいあると思うので、これからどんどん情報収集していきたいと思います。